{% extends 'baykeshop/user/login.html' %}

{% load i18n %}

{% block title %}注册{% endblock %}

{% block login_title %}注册{% endblock %}

{% block form %}
    <div id="register" class="pt-3">
        <b-field label="Username" :label-position="labelPosition">
            <b-input
                    maxlength="30"
                    :has-counter="false"
                    icon="account"
                    v-model="username"
                    placeholder="Username">
            </b-input>
        </b-field>
        <b-field label="Password" :label-position="labelPosition">
            <b-input
                    type="password"
                    password-reveal
                    :has-counter="false"
                    maxlength="30"
                    icon="lock"
                    v-model="password"
                    placeholder="Password">
            </b-input>
        </b-field>
        <b-field label="Email" :label-position="labelPosition" grouped group-multiline>
            <b-input
                    type="email"
                    :has-counter="false"
                    maxlength="30"
                    icon="email"
                    v-model="email"
                    @input="changeCode"
                    expanded
                    placeholder="Email">
            </b-input>
            <p class="control">
                <b-input
                        type="text"
                        maxlength="4"
                        placeholder="验证码"
                        v-model="code"
                        :has-counter="false"
                        v-if="email"
                        expanded>
                </b-input>
            </p>
            <p class="control">
                <b-button class="button is-primary" :disabled="isshow || countdown <=0 " @click="getCode">{$ codetext $}
                </b-button>
            </p>
        </b-field>
        <b-field>
            <b-button
                    type="is-primary"
                    @click="login"
                    expanded
                    :disabled="username && password && email && code ? false : true">
                注册
            </b-button>
        </b-field>

    </div>

{% endblock %}


{% block vue %}
    <script>
        var register = new Vue({
            el: '#register',
            delimiters: ['{$', '$}'],
            data: {
                labelPosition: 'on-border',
                code: '',
                username: '',
                password: '',
                email: '',
                codetext: '获取验证码',
                isshow: true,
                date: 60,
                // 倒计时的秒数
                countdown: 20,
            },
            methods: {
                changeCode() {
                    if (this.email) {
                        this.isshow = false
                    }
                },

                <!--发送验证码后10秒倒计时-->
                startCountdown() {
                    this.isshow = true
                    let timer = setInterval(() => {
                        this.countdown--;
                        this.codetext = this.countdown +'秒'
                        if (this.countdown <= 0) {
                            this.codetext = '获取验证码'
                            this.countdown = 20
                            this.isshow = false
                            clearInterval(timer);
                        }
                    }, 1000)

                },

                getCode() {
                    request({
                        url: '{% url "baykeshop:obtain-code" %}',
                        method: 'post',
                        data: {
                            email: this.email
                        }
                    }).then(res => {
                        console.log(res)
                        if (res.status == 201 || res.status == 200) {
                            bayke.toastMessage('is-success', '验证码已发送，请前往邮箱查收！')
                            this.startCountdown() //启动倒计时
                        } else {
                            bayke.toastMessage('is-danger', '验证码发送失败！')
                        }
                    })
                },

                login() {
                    request({
                        url: '{% url "baykeshop:register-api" %}',
                        method: 'post',
                        data: {
                            username: this.username,
                            password: this.password,
                            email: this.email,
                            code: this.code
                        }
                    }).then(res => {
                        if (res.status == 201 || res.status == 200) {
                            bayke.toastMessage('is-success', '注册成功，请登录！')
                            setTimeout(() => {
                                location.href = '{% url "baykeshop:login" %}'
                            }, 2000);

                        } else {
                            bayke.toastMessage('is-danger', '注册失败，请检查！')
                        }
                    })
                }
            },
        })
    </script>
{% endblock %}
    